<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>嵌套</title>
    <script src="../../UI/vue/vue.js"></script>
</head>

<body>
    <div id="root">
        <school></school>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    //创建student组件
    const student = Vue.extend({
        template: `
        <div>
            <h2>学生姓名：{{studentName}}</h2>
            <h2>学生年龄：{{age}}</h2>
        </div>`,
        data() {
            return {
                studentName: 'breeze',
                age: 18,
            }
        }
    })
    //创建school组件
    const school = Vue.extend({
        template: `
        <div>
            <h2>学校名称：{{schoolName}}</h2>
            <h2>学校地址：{{address}}</h2>
            <!-- 父组件使用子组件 -->
            <student></student>
        </div>
        `,
        data() {
            return {
                schoolName: 'Vue',
                address: 'Online',
            }
        },
        //注册组件
        components: {
            student
        }
    })


    //创建hello组件
    const hello = Vue.extend({
        template: `
				<div>	
					<h2>hello！{{name}}</h2>
				</div>
			`,
        data() {
            return {
                name: 'VueJs'
            }
        }
    })

    //定义app组件
    const app=Vue.extend({
        template:`
        <div>
        <hello></hello>    
        <school></school>
        </div>
        `,
        components:{
            school,
            hello
        }
    })

    new Vue({
        template:`<app></app>`,
        el: '#root',
        //第二步注册组件
        components: {
            app
        }
    })
</script>

</html>